<template>
  <view class="lite-icon" :style="iconStyle" @click="$emit('click')">
    <!-- 使用unicode字符作为图标 -->
    <text v-if="iconMap[name]" class="icon-text" :style="textStyle">{{ iconMap[name] }}</text>
    <!-- 如果没有匹配的图标，显示图片 -->
    <image v-else-if="name.startsWith('/') || name.startsWith('http')" 
           :src="name" 
           :style="imageStyle"
           mode="aspectFit" />
    <!-- 默认图标 -->
    <text v-else class="icon-text" :style="textStyle">●</text>
  </view>
</template>

<script>
export default {
  name: 'LiteIcon',
  props: {
    name: {
      type: String,
      default: ''
    },
    size: {
      type: [String, Number],
      default: 16
    },
    color: {
      type: String,
      default: '#333333'
    }
  },
  computed: {
    // 常用图标映射（使用Unicode字符）
    iconMap() {
      return {
        'search': '🔍',
        'bell': '🔔',
        'map': '🗺️',
        'arrow-left': '◀',
        'home': '🏠',
        'heart-fill': '❤️',
        'plus': '➕',
        'minus': '➖',
        'close': '✕',
        'checkmark': '✓',
        'more': '⋯',
        'camera': '📷',
        'share': '📤',
        'edit': '✎',
        'delete': '🗑️',
        'star': '⭐',
        'location': '📍'
      }
    },
    iconStyle() {
      return {
        width: this.size + 'px',
        height: this.size + 'px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      }
    },
    textStyle() {
      return {
        fontSize: this.size + 'px',
        color: this.color,
        lineHeight: '1'
      }
    },
    imageStyle() {
      return {
        width: this.size + 'px',
        height: this.size + 'px'
      }
    }
  }
}
</script>

<style scoped>
.lite-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-text {
  font-family: Arial, sans-serif;
  user-select: none;
}
</style>